<template>
  <div class="todoTrans">
    <div class="title">待处理事务</div>
    <div class="box">
      <div v-for="(item, index) in dataList" :key="index" class="trans-item">
        <span>{{ item.name + '：' }}</span>
        <span>{{ item.value }}</span>
      </div>
    </div>
  </div>
</template>

<script setup name="todoTrans">
  import { ref, reactive, toRefs, getCurrentInstance, onActivated } from 'vue'

  // 获取注册的全局实列
  const currentThis = getCurrentInstance().appContext.config.globalProperties

  const currentData = reactive({
    dataList: [
      {name: '待发货', value: '10'},
      {name: '待换货', value: '2'},
      {name: '待退款', value: '3'},
      {name: '待提现', value: '10'},
      {name: '待结算', value: '12'},
      {name: '厂商待审核', value: '2'},
      {name: '商品待审核', value: '6'},
      {name: '加盟待审核', value: '5'}
    ]
  })
  let {dataList} = toRefs(currentData)

</script>

<style lang="less" scoped>
.todoTrans{
  width: calc(100% - 1.6%);
  padding: 0 0.8% 0.8%;
  .title{
    font-weight: bold;
    margin-bottom: 0.8%;
  }
  .box{
    width: calc(100% - 1.6%);
    padding: 0.8%;
    background: #ffffff;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .trans-item{
      >span{
        font-size: 15px;
        font-weight: bold;
        &:first-child{
          color: #333333;
        }
        &:last-child{
          color: #F93E3E;
        }
      }
    }
  }
}
</style>